<template>
    <div>
        <van-nav-bar
        title="人气"
        left-arrow
        @click-left="onClickLeft"/>
        <div class="tag">
            <van-tabs v-model="active" color="#ff9999" sticky>
                <van-tab title="男生">
                    <div class="dashi">
                        <img src="https://img.axureshop.com/26/5a/74/265a746da2364d2cb6895a934c11eec9/images/人气/u1115.png">
                        <span class="dashi-span1">大师推荐的书</span>
                        <span class="dashi-span2">成功是可以复制的</span>
                    </div>
                    <book-item2 v-for="item in books1" :key="item.id" :books="item"></book-item2>
                </van-tab>
                <van-tab title="女生">
                    <div class="dashi">
                        <img src="https://img.axureshop.com/26/5a/74/265a746da2364d2cb6895a934c11eec9/images/人气/u1115.png">
                        <span class="dashi-span1">大师推荐的书</span>
                        <span class="dashi-span2">成功是可以复制的</span>
                    </div>
                    <book-item2 v-for="item in books2" :key="item.id" :books="item"></book-item2>
                </van-tab>
                <van-tab title="动漫">
                    <div class="dashi">
                        <img src="https://img.axureshop.com/26/5a/74/265a746da2364d2cb6895a934c11eec9/images/人气/u1115.png">
                        <span class="dashi-span1">大师推荐的书</span>
                        <span class="dashi-span2">成功是可以复制的</span>
                    </div>
                    <book-item2 v-for="item in books3" :key="item.id" :books="item"></book-item2>
                </van-tab>
                <div class="books">
                    <book-item3 v-for="item in books4" :key="item.id" :books="item"></book-item3>
                </div>
                <book-item2 v-for="item in books" :key="item.id" :books="item"></book-item2>
            </van-tabs>
        </div>
    </div>
    
</template>

<script>
import bookItem2 from '@/components/bookItem2'
import bookItem3 from '@/components/bookItem3'
import { getBooksApi } from '@/api/booksApi';
    export default {
        methods: {
            onClickLeft() {
                this.$router.push('city_boys');
            },
        },
        components: {
            bookItem2,
            bookItem3,
        },
        async created() {
            this.$root.$children[0].$children[1].isShowHead = false;
            let books = await getBooksApi();
            this.books = books;
            this.books1 = books.slice(0,3);
            this.books2 = books.slice(4,7);
            this.books3 = books.slice(2,5);
            this.books4 = books.slice(0,4);
            console.log(this.books);
        },
        beforeDestroy() {
            this.$root.$children[0].$children[1].isShowHead = true;
        },
        data() {
            return {
                active: 0,
                books: [],
                books1: [],
                books2: [],
                books3: [],
                books4: [],
            };
        }
    }
</script>

<style lang="scss" scoped>
.tag{
    width: 50%;
    height: 40px;
    margin-top: 15px;
}
.dashi{
    width: 341px;
    height: 81px;
    background-color: #e4e4e4;
    margin-left: 15px;
    border: 1px solid #e4e4e4;
    position: relative;
    img{
        position: absolute;
        width: 43px;
        height: 39px;
        top: 15px;
        left: 65px;
    }
    .dashi-span1{
        text-align: center;
        margin-top: 15px;
        font-size: 18px;
        color: #666;
        display: block;
    }
    .dashi-span2{
        text-align: center;
        display: block;
        font-size: 14px;
        color: #999;
    }
}
.books{
    width: 341px;
    height: 150px;
    margin-left: 15px;
    margin-top: 15px;
}
</style>